<div class="display-flex flex-direction-column width-100 work-flow-box">
    <div class="work-flow-title">
      {{data.name}}
    </div>
    <div class="work-flow-sub-title">
      {{data.comment}}
    </div>
    <div class="canvas-container" id="canvas">
        <div>
            <div *ngFor="let node of nodes" class="node" [style.font-size]="node.comment?'12px':'14px'" [style.top]="node.top +'px'"
                [style.left]="node.left+'px'" [style.width]="node.width+'px'" (mouseenter)="showDetail(node)" (mouseleave)="hideDetail()">
                {{node.name}}
            </div>
            <div class="detail" [style.top]="detail.top +'px'" [style.left]="detail.left+'px'" *ngIf="detail_show">
                <div class="width-100">{{detail.name}}</div>
                <div class="width-100" *ngIf="detail.role" style="white-space:nowrap">
                    <span>执行角色</span>
                    <span>{{detail.role}}</span>
                </div>
                <div class="width-100 display-flex flex-direction-column" *ngIf="detail.params" style="white-space:nowrap">
                    <span>下一步参数:</span>
                    <span *ngFor="let p of detail.params">{{p}}</span>
                </div>
            </div>
        </div>
        <canvas #canvas_rank class="canvas"></canvas>
    </div>
</div>